<template>
  <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      bordered
      size="middle"
      @resizeColumn="handleResizeColumn"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
      class="adjust-table"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'projectName'">
        <div class="projectName-style">
          <div>
            {{ text }}
          </div>
          <div>
            <a-popover placement="right">
              <template #content>
                <div class="projectName-detail">
                  <p>导演：{{ record.director || "--" }}</p>
                  <p>编剧：{{ record.screenWriter || "--" }}</p>
                  <p>主演：{{ record.cast || "--" }}</p>
                </div>
              </template>
              <div class="projectName-mark">导演/编剧/主演</div>
            </a-popover>
          </div>
        </div>
      </template>
      <template v-if="column.dataIndex === 'mainPicUrl'">
        <div class="poster-style">
          <a-image :width="50" :src="record.mainPicUrl"/>
        </div>
      </template>
      <!-- 集数/时长 -->
      <template v-if="column.dataIndex === 'episode'">
        {{ record.episode ? record.episode + "集/" : "" }}{{ record.length }}
      </template>

      <!-- 推送状态 -->
      <template v-if="column.dataIndex === 'status'">
        <a-tag
            v-if="record.status == 0"
            color="#2db7f5"
            style="border-radius: 2px"
        >未推送
        </a-tag
        >
        <a-tag v-else color="#87d068" style="border-radius: 2px">已推送</a-tag>
      </template>

      <template v-if="column.dataIndex === 'operations'">
        <div class="operations-style">
          <a-typography-link @click="editFunc(record)" v-track="'点击项目展示编辑'">编辑</a-typography-link>
          <a-typography-link @click="pushFunc(record.id,'pro')" v-track="'点击项目展示推送'">推送</a-typography-link>
          <a-typography-link @click="pushFunc(record.id,'test')" v-track="'点击项目展示推送'">推送测试</a-typography-link>

        </div>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts">
export default {
  name: "ProjectListTable",
};
</script>
<script lang="ts" setup>
import {SmileOutlined, DownOutlined} from "@ant-design/icons-vue";
import type {TableColumnsType} from "ant-design-vue";
import {defineComponent, reactive, ref, computed, unref, inject} from "vue";
import {RouteLocationRaw, useRouter} from "vue-router";
import ProjectModal from "./project-modal.vue";
import type {TableColumnType, TableProps} from "ant-design-vue";
import {post, get} from "@/service/request";
import {message} from "ant-design-vue";

const router = useRouter();

const {tableSelectChangeRowKeys, updateSelectChangeRowKeys} = inject(
    "showTableProvide"
) as any;
const {zhState, updateZhState} = inject("showZhModalProvide") as any;

const emits = defineEmits([
  "tableChange",
  "editFunc",
  "delFunc",
  "detailFunc",
]);
const props = defineProps({
  columns: [] as any[],
  data: [] as any[],
  pagination: {} as any,
});
const handleResizeColumn = (w: any, col: any) => {
  col.width = w;
};

const editFunc = (record1: any) => {
  get(`/mediaItem/getByPid?pid=${record1.id}`).then((res: any) => {
    if (res.errCode == 0) {
      let record2 = res.data;
      emits("editFunc", record1, record2, "内容编辑");
    } else {
      message.error(res.msg);
    }
  });
  // updateZhState(record);
};
const detailFunc = (record1: any) => {
  get(`/mediaItem/getByPid?pid=${record1.id}`).then((res: any) => {
    if (res.errCode == 0) {
      let record2 = res.data;
      emits("editFunc", record1, record2, "详情内容");
    } else {
      message.error(res.msg);
    }
  });
};

const selectedRowKeys = ref([] as any[]);

const onSelectChange = (changableRowKeys: string[]) => {
  console.log("selectedRowKeys changed: ", changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};

const handleTableChange = () => {
  console.log("分页、排序、筛选变化时触发");
  emits("tableChange");
};
const rowSelection: TableProps["rowSelection"] = {
  onChange: (selectedRowKeys: any[], selectedRows: any[]) => {
    updateSelectChangeRowKeys(selectedRowKeys);
    console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
    );
  },
  getCheckboxProps: (record: any) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};

const closeMovieHanle = () => {
};
const pushFunc = (recordId: any, type: any) => {
  const pushKey = [] as any[];
  pushKey.push(recordId);
  const postParam = {
    idList: pushKey,
    type: type
  };

  post(`/mediaItem/push`, postParam).then((res: any) => {
    if (res.errCode == 0) {
      message.success("推送成功！");
    } else {
      message.warn(res.msg);
    }
    emits("tableChange");
  });
};
</script>

<style lang="less" scoped>
.projectName-detail {
  font-size: 12px;
  max-width: 400px;
  overflow: hidden;

  p {
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
  }
}

.sample-style {
  font-size: 14px;
  color: #1890ff;
}

.sample-style :hover {
  cursor: pointer;
}

.projectName-style {
  display: flex;
  align-items: center;
  flex-direction: column;

  .projectName-mark {
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
    background-color: #e8f4ff;
    border-color: #d1e9ff;
    display: inline-block;
    font-size: 12px;
    color: #1890ff;
    border-width: 1px;
    border-style: solid;
    border-radius: 2.5px;
  }
}

.operations-style {
  //display: flex;
  //justify-content: space-between;
  .ant-typography {
    margin-left: 10px;
  }
}

.ant-pagination-item-active {
  background-color: #1890ff !important;

  a {
    color: #fff !important;
  }
}
</style>